<template>
  <el-dialog
    class="base-dialog-root"
    :model-value="visible"
    width="40%"
    :title="formTitle"
    @close="onClose"
  >
    <el-form
      class="base-form-root"
      ref="ruleForm"
      :model="formModel"
      :rules="rules"
      label-position="top"
      size="large"
      @submit.prevent
    >
      <el-form-item label="分类名称" prop="formName">
        <el-input v-model="formModel.formName" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" class="save-btn" @click="onConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, ref, shallowRef, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
import { pick as _pick } from 'lodash-es'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/src/message.scss'
import { QOP_MAP } from '@/management/utils/constant'
import { type IWorkform, FormType } from '@/management/utils/types/formsTypes'

const store = useStore()
const emit = defineEmits(['on-close-codify', 'onFocus', 'change', 'blur'])
const props = defineProps({
  parentId: String,
  type: String,
  width: String,
  spaceDetail: Object,
  visible: Boolean
})
const ruleForm = shallowRef<any>(null)

const formTitle = computed(() => {
  return props.type === QOP_MAP.ADD ? '创建分类' : '管理分类'
})
const formModel = ref<IWorkform>({
  formName: '',
  formRemark: '',
  formType: FormType.Dirs,
  parentId: props.parentId || '-2'
})

const rules = {
  formName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
}

const getCurrent = (val: any) => {
  return {
    ..._pick(val, ['_id', 'formId', 'formName', 'formType', 'formRemark', 'parentId'])
  }
}

watch(
  () => props.spaceDetail,
  (val) => {
    if (props.type === QOP_MAP.EDIT) {
      formModel.value = getCurrent(val)
    }
  },
  {
    deep: true
  }
)

const onClose = () => {
  formModel.value = {
    formName: '',
    formRemark: '',
    formType: FormType.Dirs,
    parentId: props.parentId || '-1'
  }
  emit('on-close-codify')
}

const onConfirm = async () => {
  ruleForm.value?.validate(async (valid: boolean) => {
    if (valid) {
      if (props.type === QOP_MAP.ADD) {
        try {
          await handleAdd()
          emit('on-close-codify', 'update')
        } catch (err) {
          ElMessage.error('createSpace status err' + err)
        }
      } else {
        try {
          await handleUpdate()
          emit('on-close-codify', 'update')
        } catch (err) {
          ElMessage.error('createSpace status err' + err)
        }
      }
    } else {
      return false
    }
  })
}

// const handleMemberSelect = (val: string, label: string) => {
//   formModel.value.members.push({ userId: val, username: label, role: UserRole.Member })
// }
// const handleMembersChange = (val: IMember[]) => {
//   formModel.value.members = val
// }
const handleUpdate = async () => {
  await store.dispatch('dataform/updateDirectory', formModel.value)
}
const handleAdd = async () => {
  await store.dispatch('dataform/addDirectory', formModel.value)
}
</script>

<style lang="scss" rel="lang/scss" scoped>
.base-form-root {
  padding: 20px;
}
</style>
